<template>
	<view>
		<view style="height: 70rpx;"></view>
		<view class="infoCard">
			<view class="item">
				<image :src="user.avatar" mode="aspectFill" class="image"></image>
			</view>
			<view class="item">
				<text class="username">{{user.username}}</text><br />
				<text class="id">ID: {{user.id}}</text>
			</view>
		</view>
		<view style="margin: 30rpx 60rpx;">
			<view class="info">
				<uni-icons type="person" color="#6869a8" size="30"></uni-icons> 性别: <text
					class="t">{{getSex(user.sex)}}</text>
			</view>
			<view class="info">
				<uni-icons type="star" color="#6869a8" size="30"></uni-icons> 年龄: <text
					class="t">{{getAge(user.birth)}}</text>
			</view>
			<view class="info">
				<uni-icons type="gift" color="#6869a8" size="30"></uni-icons> 生日: <text
					class="t">{{getBirth(user.birth)}}</text>
			</view>
			<view class="info">
				<uni-icons type="location" color="#6869a8" size="30"></uni-icons> 位置: <text
					class="t">{{getLocation(user.location)}}</text>
			</view>
		</view>
		<view class="footer">
			<button type="default" @click="edit"
				style="width: 80%;color:white;background-color: #6869a8;margin-bottom: 30rpx;border-radius:35rpx;">编辑资料</button>
			<button type="default" @click="logout" style="width: 80%;color: #FD5A75;border-radius:35rpx;">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			user() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			logout() {
				let self = this
				uni.reLaunch({
					url: "../login/login",
					success() {
						uni.showToast({
							icon: "none",
							title: "退出登录"
						});
						self.$socket.close()
						self.$store.commit("logout");
					}
				})
			},
			edit() {
				uni.navigateTo({
					url: '../edit/edit'
				})
			},
			getSex(sex) {
				if (sex === 2) return "未设置"
				else if (sex === 0) return "男"
				else if (sex === 1) return "女"
			},
			getAge(date) {
				let start = new Date(date)
				let now = new Date()
				let sYear = start.getFullYear()
				let nYear = now.getFullYear()
				let sMonth = start.getMonth()
				let nMonth = now.getMonth()
				let sDay = start.getDate()
				let nDay = now.getDate()
				if (nMonth < sMonth) return nYear - sYear - 1
				else if (nMonth > sMonth) return nYear - sYear
				else {
					if (nDay < sDay) return nYear - sYear - 1
					else return nYear - sYear
				}
			},
			getBirth(date) {
				let d = new Date(date)
				let month = d.getMonth() + 1
				let day = d.getDate()
				return month + " 月 " + day + " 日"
			},
			getLocation(l) {
				if (l === "") return "未设置"
				else return l
			}
		}
	}
</script>

<style lang="scss" scoped>
	.infoCard {
		margin: 0 40rpx;
		padding: 50rpx 0;
		align-items: center;
		display: flex;
		border-bottom: #E8E8E8 1px solid;

		.item {
			display: inline-block;
			margin: 0 30rpx;
			height: 180rpx;
		}

		.image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 30rpx;
		}

		.username {
			display: inline-block;
			max-width: 420rpx;
			font-size: 50rpx;
			font-weight: bold;
			overflow-y: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.id {
			font-size: 33rpx;
		}
	}

	.info {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		font-size: 33rpx;

		.t {
			margin: 0 40rpx;
			color: #999999;
		}
	}

	.footer {
		position: fixed;
		width: 100%;
		bottom: 30rpx;
	}
</style>
